<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <meta name="renderer" content="webkit"/>
  <meta name="force-rendering" content="webkit"/>
  <meta http-equiv="X-UA-Compatible" content="IE=Edge,chrome=1"/>
  <title>游戏报表</title>
  <!-- Tell the browser to be responsive to screen width -->
  <meta content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no" name="viewport">

  <link rel="stylesheet" href="/bower_components/bootstrap/dist/css/bootstrap.min.css">
  <link rel="stylesheet" href="/bower_components/font-awesome/css/font-awesome.min.css">
  <link rel="stylesheet" href="/bower_components/Ionicons/css/ionicons.min.css">
  <link rel="stylesheet" href="/bower_components/datatables.net-bs/css/dataTables.bootstrap.min.css">
  <link rel="stylesheet" href="/dist/css/AdminLTE.min.css">
  <link rel="stylesheet" href="/dist/css/skins/_all-skins.min.css">

  <link rel="stylesheet" href="/dist/js/datepicker/css/datepicker.css">

  <!-- 引入样式 -->
  <link rel="stylesheet" href="/dist/js/eleui.css">

  <!-- import Vue before Element -->
  <script src="/dist/js/vue.js"></script>
  <!-- import JavaScript -->
  <script src="/dist/js/eleui.js"></script>
  <!-- HTML5 Shim and Respond.js IE8 support of HTML5 elements and media queries -->
  <!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
  <!--[if lt IE 9]>
  <script src="https://oss.maxcdn.com/html5shiv/3.7.3/html5shiv.min.js"></script>
  <script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
  <![endif]-->

  <!-- Google Font -->
</head>
<body class="hold-transition skin-blue sidebar-mini">

<div  class="wrapper">

  <!--头部-->
  <header id="headerDiv" class="main-header">
    <!--#include  file="/pages/admin/header.html"-->
  </header>

  <!--左侧边栏 -->
  <aside id="sidebarDiv" class="main-sidebar">
    <!--#include  file="/pages/admin/sidebar.html"-->
  </aside>

  <div class="content-wrapper">
    <!-- Content Header (Page header) -->
    <section class="content-header">
      <h1>
        <small>游戏报表</small>
      </h1>
      <ol class="breadcrumb">
        <li><a href="javascript:void(0);"><i class="fa fa-dashboard"></i> 游戏指标分析</a></li>
        <li><a href="javascript:void(0);">游戏报表</a></li>
      </ol>
    </section>



    <!-- Main content -->
    <section class="content">
      <div class="row">
        <div class="col-xs-12">
          <div id="app" class="box">
            <div class="box-header">
             <!-- <el-row :gutter="20">
                <el-col :span="8"><div class="grid-content">

                  <el-date-picker  v-model="s_date" @change="dateChange" type="daterange" value-format="yyyy-MM-dd" align="right" unlink-panels  range-separator="~" start-placeholder="开始日期" end-placeholder="结束日期" :picker-options="pickerOptions2">
                  </el-date-picker>

                </div></el-col>
                <el-col :span="16"><div class="grid-content">
                  <el-input placeholder="请输入内容" v-model="s_text" class="input-with-select">
                    <el-select v-model="s_selType" slot="prepend" placeholder="请选择" style="width:100px">
                      <el-option label="子渠道id" value="lyid"></el-option>
                      <el-option label="游戏名称" value="game"></el-option>
                    </el-select>
                    <el-button slot="append" icon="el-icon-search" v-on:click="search"></el-button>
                  </el-input>
                </div></el-col>

              </el-row>-->


              <form role="form" class="form-inline pull-right">
                <label class="control-label">搜索:</label>
              <div class="form-group">
                <div class="c-datepicker-date-editor J-datepicker-range-day mt10">
                  <i class="c-datepicker-range__icon kxiconfont icon-clock"></i>
                  <input id="startDate" placeholder="开始日期" name="" class="c-datepicker-data-input only-date" value="" >
                  <span class="c-datepicker-range-separator">~</span>
                  <input id="endDate" placeholder="结束日期" name="" class="c-datepicker-data-input only-date" value="">
                </div>
              </div>


              <div class="form-group">
                <select v-model="s_selType" class="form-control m-b">
                  <option value="game">游戏名称</option>
                </select>
              </div>
              <div class="form-group">
                <div class="input-group">
                  <input v-model="s_text" type="text" class="form-control">
                  <span class="input-group-btn">
                        <button type="button" class="btn btn-primary" @click="search"><i class="fa fa-search"></i></button>
                    </span>
                </div>
              </div>
              </form>




            </div>



            <div  class="box-body table-responsive">
              <form role="form" class="form-inline pull-right">
                <!--<div class="form-group">
                  <input id="searchDate" type="text" class="form-control" placeholder="日期">
                </div>-->
                <div class="form-group">
                  <div class="input-group input-group-sm">
                    <div class="input-group-btn">
                      <button type="button" class="btn btn-default">总注册数</button>
                    </div>
                    <!-- /btn-group -->
                    <input type="text" readonly id="register_count" class="form-control">
                  </div>
                </div>
                <div class="form-group">
                  <div class="input-group input-group-sm">
                    <div class="input-group-btn">
                      <button type="button" class="btn btn-default">总登录数</button>
                    </div>
                    <!-- /btn-group -->
                    <input type="text" readonly id="login_count" class="form-control">
                  </div>
                </div>
                <div class="form-group">
                  <div class="input-group input-group-sm">
                    <div class="input-group-btn">
                      <button type="button" class="btn btn-default">总充值数</button>
                    </div>
                    <!-- /btn-group -->
                    <input type="text" readonly id="recharge_count" class="form-control">
                  </div>
                </div>
                <div class="form-group">
                  <div class="input-group input-group-sm">
                    <div class="input-group-btn">
                      <button type="button" class="btn btn-default">总充值金额</button>
                    </div>
                    <!-- /btn-group -->
                    <input type="text" readonly id="recharge" class="form-control">
                  </div>
                </div>
              </form>


              <el-table
                      v-loading="loading"
                      :data="tableData"
                      stripe
                      border
                      size="small"
                      style="width: 100%">


                <el-table-column fixed prop="day" label="日期" width="100"></el-table-column>

                <el-table-column
                        fixed
                        prop="game"
                        label="游戏">
                </el-table-column>
                <el-table-column
                        prop="first_time"
                        label="首次时长">
                </el-table-column>
                <el-table-column
                        prop="login_count"
                        label="登陆">
                </el-table-column>
                <el-table-column
                        prop="register_count"
                        label="新增">
                </el-table-column>
                <el-table-column
                        prop="recharge_count"
                        label="充值">
                </el-table-column>
                <el-table-column
                        prop="day_activity_dau"
                        label="日活">
                </el-table-column>

                <el-table-column label="次日留存" >
                  <template slot-scope="scope">
                    <span>{{scope.row.dr1 * 100 | rounding}}%</span>
                  </template>
                </el-table-column>


                <el-table-column label="7日留存" >
                  <template slot-scope="scope">
                    <span>{{scope.row.dr7 * 100 | rounding}}%</span>
                  </template>
                </el-table-column>

                <el-table-column label="30日充值率" width="100">
                  <template slot-scope="scope">
                    <span>{{scope.row.recharge_rate30 * 100 | rounding}}%</span>
                  </template>
                </el-table-column>

                <el-table-column
                        prop="avg_aurp"
                        label="平均消费">
                </el-table-column>

                <el-table-column prop="ltv1" label="次日LTV"></el-table-column>
                <el-table-column prop="ltv7" label="7日LTV"></el-table-column>
                <el-table-column prop="login_recharge_count" label="登录付费人数" width="100"></el-table-column>
                <el-table-column  label="登录付费率" width="100">
                  <template slot-scope="scope">
                    <span>{{scope.row.login_recharge_rate * 100 | rounding}}%</span>
                  </template>

                </el-table-column>
                <el-table-column prop="login_recharge" label="登录充值"></el-table-column>
                <el-table-column prop="register_recharge_count" label="新增付费人数" width="100"></el-table-column>

                <el-table-column prop="register_recharge_rate" label="新增付费率" width="100"></el-table-column>
                <el-table-column prop="register_recharge" label="新增充值"></el-table-column>
                <el-table-column prop="recharge" label="充值金额"></el-table-column>
                <el-table-column prop="recharge_sum" label="累计充值"></el-table-column>
                <el-table-column prop="recharge_sum_people" label="累计充值人数" width="100"></el-table-column>


              </el-table>
              <div align="center">
                              <el-pagination
                                      @size-change="handleSizeChange"
                                      @current-change="handleCurrentChange"
                                      :current-page="currentPage"
                                      :page-sizes="[10, 20, 30, 40]"
                                      :page-size="pagesize"
                                      layout="total, sizes, prev, pager, next, jumper"
                                      :total="totalCount">
                              </el-pagination>
                          </div>
            </div>
            <!-- /.box-body -->
          </div>
          <!-- /.box -->



        </div>
      </div>
    </section>
    <!-- /.content -->

  </div>

  <!--底部-->
  <footer id="footerDiv" class="main-footer">
    <!--#include  file="/pages/admin/footer.html"-->
  </footer>








</div>

<!-- ./wrapper -->
<script src="/bower_components/jquery/dist/jquery.min.js"></script>
<script src="/bower_components/morris.js/morris.min.js"></script>
<script src="/bower_components/bootstrap/dist/js/bootstrap.min.js"></script>


<script src="/bower_components/jquery-slimscroll/jquery.slimscroll.min.js"></script>
<script src="/bower_components/fastclick/lib/fastclick.js"></script>
<script src="/dist/js/adminlte.min.js"></script>
<script src="/dist/js/store.min.js"></script>
<script src="/dist/js/layer/layer.js"></script>
<script src="/dist/js/laydate/laydate.js"></script>

<script src="/dist/js/datepicker/js/plugins/moment.min.js"></script>
<script src="/dist/js/datepicker/js/datepicker.all.js"></script>

<script>

    var vm= new Vue({
        el: '#app',
        data() {
                return {
                    loading: true,
                    tableData: [],
                    totalCount:100,
                    //默认每页数据量
                    pagesize: 10,
                    //默认高亮行数据id
                    highlightId: -1,
                    //当前页码
                    currentPage: 1,
                    //查询的页码
                    start: 1,
                    s_date:'',
                    s_text:'',
                    s_selType:'game',
                    s_type:'1',
                    start_date:'',
                    end_date:''
                }
        },
        methods: {
            //加载table数据
            loadData: function(){
                this.start_date=$("#startDate").val();
                this.end_date=$("#endDate").val();
                $.ajax({
                    type : 'POST',
                    url : '/lmgame/gamedata/getListByPageByGame',
                    data :
                        {
                            pageNum:this.currentPage,
                            pageSize:this.pagesize,
                            searchKey:this.s_selType,
                            searchValue:this.s_text,
                            startDate:this.start_date,
                            endDate:this.end_date,
                            type:this.s_type
                        },
                    dataType : "json",
                    success: function(data) {
                        vm.tableData=data.pagesdata;
                        vm.totalCount = data.number;
                        vm.loading=false;
                    }
                });

            },
            //搜索
            search: function(){
                this.loadData();
            },
            //每页显示数据量变更
            handleSizeChange: function(val) {
                this.pagesize = val;
                this.loadData(this.currentPage, this.pagesize);
            },
            //页码变更
            handleCurrentChange: function(val) {
                this.currentPage = val;
                this.loadData(this.currentPage, this.pagesize);
            },

        },mounted(){
            this.loadData();
            sum();
        },
        filters: {
            rounding (value) {
                return value.toFixed(2)
            }
        }
    })

    $(function () {
        var DATAPICKERAPI = {

            shortcutMonth: function () {
                // 当月
                var nowDay = moment().get('date');
                var prevMonthFirstDay = moment().subtract(1, 'months').set({ 'date': 1 });
                var prevMonthDay = moment().diff(prevMonthFirstDay, 'days');
                return {
                    now: '-' + nowDay + ',0',
                    prev: '-' + prevMonthDay + ',-' + nowDay
                }
            },

            // 快捷选项option
            rangeShortcutOption1: [
                {
                    name: '今天',
                    day: '0,0'
                },
                {
                    name: '昨天',
                    day: '-1,-1'
                },
                {
                    name: '近7天',
                    day: '-8,-1'
                }, {
                    name: '最近30天',
                    day: '-31,-1'
                }]

        };
        //年月日范围
        $('.J-datepicker-range-day').datePicker({
            hasShortcut: true,
            format: 'YYYY-MM-DD',
            isRange: true,
            shortcutOptions: DATAPICKERAPI.rangeShortcutOption1
        });
    });

    function sum() {
        let url="/lmgame/gamedata/sum";
        $.ajax({
            type : 'POST',
            url : url,
            data :
                {
                    startDate:$("#startDate").val(),
                    endDate:$("#endDate").val(),
                    searchKey:$("#searchKey").val(),
                    searchValue:$("#searchValue").val(),
                    type:1
                },
            dataType : "json",
            success: function(data) {
                if(data.code == 0){
                    $("#login_count").val(data.data.login_count);
                    $("#register_count").val(data.data.register_count);
                    $("#recharge_count").val(data.data.recharge_count);
                    $("#recharge").val(data.data.recharge);
                }
            },
            error: function (xhr, ts, et) { //XMLHttpRequest, textStatus, errorThrown
                if (xhr.status === 400) {
                    window.location.href = "/pages/admin/login.html";
                }
                if (xhr.status === 403) {
                    window.location.href = "/403.html";
                }
            }
        });
    }

</script>

</body>
</html>
